<template>
  <div>
    <div class="header">
      <span @click="fun()">&lt;</span>
      <span @click="fun()">x</span>
      <span>积分专区</span>
    </div>
    <div class="banner">
      <img src="img/zhangimg/jifenzhuanqu/1.gif" alt="" />
    </div>
    <h1>
      <img src="img/zhangimg/jifenzhuanqu/16.gif" alt="" />
      黄金会员0元购
      <img src="img/zhangimg/jifenzhuanqu/16.gif" alt="" />
    </h1>
    <div class="tu">
      <img src="img/zhangimg/jifenzhuanqu/2.gif" alt="" />
    </div>
    <main>
      <h1>
        <img src="img/zhangimg/jifenzhuanqu/16.gif" alt="" />
        权益超市热卖TOP榜
        <img src="img/zhangimg/jifenzhuanqu/16.gif" alt="" />
      </h1>
      <div class="main">
        <router-link to="/xiangqing"><img src="img/zhangimg/jifenzhuanqu/3.gif" alt="" /></router-link>
        <img class="img1" src="img/zhangimg/jifenzhuanqu/4.gif" alt="" />
        <img class="img1" src="img/zhangimg/jifenzhuanqu/5.gif" alt="" />
        <img class="img1" src="img/zhangimg/jifenzhuanqu/6.gif" alt="" />
      </div>
    </main>
    <section>
      <h1>
        <img src="img/zhangimg/jifenzhuanqu/16.gif" alt="" />
        更多权益 一站购齐
        <img src="img/zhangimg/jifenzhuanqu/16.gif" alt="" />
      </h1>
      <img class="img1" src="img/zhangimg/jifenzhuanqu/7.gif" alt="" />
      <img class="img1" src="img/zhangimg/jifenzhuanqu/8.gif" alt="" />
      <img class="img1" src="img/zhangimg/jifenzhuanqu/9.gif" alt="" />
      <img class="img1" src="img/zhangimg/jifenzhuanqu/10.gif" alt="" />
      <img class="img1" src="img/zhangimg/jifenzhuanqu/11.gif" alt="" />
      <img class="img1" src="img/zhangimg/jifenzhuanqu/12.gif" alt="" />
      <img class="img1" src="img/zhangimg/jifenzhuanqu/13.gif" alt="" />
      <img class="img1" src="img/zhangimg/jifenzhuanqu/14.gif" alt="" />
      <img class="img1" src="img/zhangimg/jifenzhuanqu/15.gif" alt="" />
    </section>
    <footer>
      <div class="main-two">
        <div class="wen">
          <h2>——活动规则——</h2>
          <p>1.活动对象:限中国移动用户参与。</p>
          <p>2.活动内容:</p>
          <p>
            ①积分兑会员：活动期间，非权益超市会员客户國权益超市新星会员可使用400积分兑换黄金会员，已成为黄金会员、铂金会员或Plus会员的客户不可重复参与。黄金会员为单月点掃产品，订购后立即生效井消耗400积分，次月1日0时失效。
          </p>
          <p>
            ②积分购权益：专区内所有权益商品均支持“积分+话费”支付，库存有限，先到先得。专区商品不定期调整，具体请以页面展示为准。
          </p>
          <p>3.署户成功购买权益商品，可通过“积好专区•我的订单”杏看订单记录。</p>
          <p>
            4.产品权益内容、产品订购及生效规则详见产品详情页【权益说明】，完整产品使用说明以权益官方说明为准。
          </p>
        </div>
      </div>
      <div class="footer">—— 我是有底线的 ——</div>
    </footer>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.header {
  width: 3.6rem;
  height: 0.5rem;
  line-height: 0.5rem;
}
.header span:nth-child(1) {
  margin: 0.2rem 0.2rem 0 0.14rem;
  font-size: 0.25rem;
}
.header span:nth-child(2) {
  margin-right: 1rem;
  font-size: 0.25rem;
}
.header span:nth-child(3) {
  font-size: 0.18rem;
  font-weight: 900;
}
.banner {
  width: 100%;
  height: 2.57rem;
}
.banner img {
  width: 100%;
  height: 2.57rem;
}
h1 {
  width: 100%;
  height: 0.58rem;
  text-align: center;
  line-height: 0.58rem;
  background-color: #c90418;
  font-size: 0.2rem;
  color: white;
}
.tu {
  width: 100%;
  height: 0.91rem;
  text-align: center;
  background-color: #c90418;
}
.tu img{
  width: 3.39rem;
  height: .84rem;
}
main .main {
  width: 100%;
  height: 2.6rem;
  background-color: #c90418;
  text-align: center;
}
main .main img {
  height: 1.25rem;
}
section {
  width: 100%;
  height: 5.2rem;
  text-align: center;
  background: #c90418;
}
section img {
  margin-right: 0.03rem;
}
section .img1{
  width: 1.1rem;
  height: 1.29rem;
}
footer {
  width: 100%;
  height: 3.67rem;
  background: #c90418;
}
.main-two {
  width: 3.6rem;
  height: 3.1rem;
  background: #b10012;
  margin-left: 0.14rem;
  border-radius: 0.2rem;
  color: white;
}
.main-two h2 {
  width: 3.6rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  font-size: 0.14rem;
}
.main-two p {
  margin-left: 0.1rem;
  font-size: 0.12rem;
}
footer .footer {
  width: 100%;
  height: 0.56rem;
  text-align: center;
  line-height: 0.56rem;
  font-size: 0.12rem;
  color: #81010e;
}
</style>